Component({
  /**
   * 组件的属性列表
   */
  properties: {
    nodes: Array,
  },

  /**
   * 组件的初始数据
   */
  data: {
    cindex: -1,
    editP: false,
    colors: ["#000", "#dd0600", "#fdd400", "#e48cb6", "#66c0b9", "#25953f"],
    align: ['left', 'center', 'right']
  },


  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 事件：添加文本
     */
    addText: function (e) {

      const nodes = this.data.nodes
      const cindex = nodes.length
      const node = {
        type: 'p',
        text: '',
        attrs: {
          fontSize: 32,
          color: this.data.colors[0],
          lineHeight: 180,
          align: this.data.align[0]
        }
      }
      nodes.push(node)
      this.setData({
        nodes,
        cindex,
        editP: true
      })
      console.log(this.data.cindex, this.data.nodes)
    },
    /**
     * 事件：文本输入
     */
    onTextareaInput: function (e) {
      const index = e.currentTarget.dataset.index;
      const nodes = this.data.nodes;
      nodes[index].text = e.detail.value;
      this.setData({
        nodes,
      })
      console.log(this.data.cindex, this.data.nodes)
    },

    /**
     * 事件：添加图片
     */
    addImage: function (e) {
      const that = this
      const nodes = that.data.nodes
      let node = {}
      wx.chooseImage({
        count: 9,
        success(res) {
          const tempFilePaths = res.tempFilePaths;

          if (tempFilePaths.length > 1) {
            wx.showActionSheet({
              itemList: ['纵向平铺', '滑动轮播'],
              success(res) {

                if (res.tapIndex === 0) {
                  for (let i = 0; i < tempFilePaths.length; i++) {
                    node = {
                      type:'img',
                      src:tempFilePaths[i],                    
                      upload:false
                    }      
                  
                    nodes.push(node)
                  }
                  that.setData({
                    nodes: nodes
                  })
                  console.log(nodes)
                } else {
                  node = {
                    type:'swiper',
                    srcs:tempFilePaths,
                    attrs:{
                      height:200
                    },
                    upload:false
                  }               
               
                  nodes.push(node)
                  console.log(nodes)
                  that.setData({
                    nodes: nodes
                  })
                }
              }
            })
          } else {
            node = {
              type:'img',
              src:tempFilePaths[0],                    
              upload:false
            }      
            nodes.push(node)
            that.setData({
              nodes: nodes
            })
          }


        }
      })

    },

    /**
     * 事件：删除节点
     */
    deleteNode: function (e) {
      const index = e.currentTarget.dataset.index;
      const nodes = this.data.nodes;
      nodes.splice(index, 1);
      this.setData({
        nodes,
      })
    },

    /**
     * 事件：上移
     */
    upNode: function (e) {
      const index = e.currentTarget.dataset.index;
      const nodes = this.data.nodes;
      this.swapArray(nodes, index, index - 1);
      this.setData({
        nodes
      })
    },

    /**
     * 事件：下移
     */
    downNode: function (e) {
      const index = e.currentTarget.dataset.index;
      const nodes = this.data.nodes;
      this.swapArray(nodes, index, index + 1);
      this.setData({
        nodes
      })
    },

    swapArray(arr, index1, index2) {
      arr[index1] = arr.splice(index2, 1, arr[index1])[0]
      return arr
    },
    /**
     * 事件：下移
     */
    setting(e) {
      console.log(e)
      const type = e.currentTarget.dataset.type
      const cindex = e.currentTarget.dataset.index

      this.setData({
        type,
        cindex,
        editP: false
      })

      console.log(this.data.cindex, this.data.nodes)

    },
    changeSize(e) {
      const index = this.data.cindex
      const nodes = this.data.nodes
      const node = nodes[index]
      node.attrs.fontSize = e.detail.value
      this.setData({
        nodes
      })
      console.log(nodes)
    },
    changeColor(e) {
      const index = this.data.cindex
      const nodes = this.data.nodes
      const node = nodes[index]
      node.attrs.color = e.currentTarget.dataset.color
      this.setData({
        nodes
      })
      console.log(nodes)
    },
    changeAlign(e) {
      const index = this.data.cindex
      const nodes = this.data.nodes
      const node = nodes[index]
      node.attrs.align = e.currentTarget.dataset.align
      this.setData({
        nodes
      })
      console.log(nodes)
    },
    changeLineHeight(e) {
      const index = this.data.cindex
      const nodes = this.data.nodes
      const node = nodes[index]
      node.attrs.lineHeight = e.detail.value
      this.setData({
        nodes
      })
      console.log(nodes)
    },
    closepopUp() {
      this.setData({
        type: '',
        editP: false,
      })
      console.log(this.data.cindex, this.data.nodes)
    },
    textareaFocus(e) {
      const cindex = e.currentTarget.dataset.index
      this.setData({
        cindex,
        editP: true,
      })
      console.log(this.data.cindex, this.data.nodes)
    },
    textareaBlur() {
      this.setData({
        cindex: -1
      })
      console.log(this.data.cindex, this.data.nodes)
    },
    // 
    changeSwiperHeight(e) {
      const index = this.data.cindex
      const nodes = this.data.nodes
      const node = nodes[index]
      node.attrs.height = e.detail.value
      this.setData({
        nodes
      })
      console.log(nodes)
    },
    donothing() {
      return false;

    },

    /**
     * 方法：传递节点值
     */
    finish() {
      this.triggerEvent('finish', this.data.nodes)
    }

  }
})